<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个3D效果</title>
    <style>
        body { margin: 0; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://unpkg.com/three/build/three.module.js';
        // 创建场景
        const scene = new THREE.Scene()

        // 设置背景色
        scene.background = new THREE.Color("#88B9DD");
        const texture = new THREE.TextureLoader()

        // 创建相机
        const camera = new THREE.PerspectiveCamera(80)
        camera.position.y = 10;
        camera.position.z = 10;
        camera.lookAt(0,0,0)
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize( window.innerWidth, window.innerHeight);
        // 将渲染器添加到页面
        document.body.appendChild(renderer.domElement)
        // 创建立方体
        // const geometry = new THREE.BoxGeometry(1, 1, 1)
        // 球体
        const geometry = new THREE.SphereGeometry(1, 32, 32);

        texture.load( "./03.jpg",function(doorColorTexture) {
            const material = new THREE.MeshBasicMaterial({
                // color: 0x555555,
                map: doorColorTexture
            })
            // 网格1
            const cube1 = new THREE.Mesh(geometry, material)
           
            cube1.position.set(0, 3, 0)
            scene.add(cube1)


            // // 网格2
            // const cube2 = new THREE.Mesh(geometry, material)
            // cube2.position.set(0, 6, 0)
            // scene.add(cube2)


            // 添加网格地面
            const gridHelper = new THREE.GridHelper(10, 10)
            scene.add(gridHelper)

            // 进行渲染
            renderer.render( scene, camera )

            // 让立方体动起来
            function animate() {
               // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
                requestAnimationFrame( animate );
                cube1.rotation.x += 0.01;
                // cube2.rotation.y += 0.01;
                // texture.rotation += 0.01;
                renderer.render( scene, camera );
            }
            animate();
        })

        // const material = new THREE.MeshBasicMaterial({ 
        //     map: doorColorTexture
        //  })
        // // 网格
        // const cube = new THREE.Mesh(geometry, material)
        // cube.position.set(0, 3, 0)
        // scene.add(cube)

        // // 添加网格地面
        // const gridHelper = new THREE.GridHelper(10, 10)
        // scene.add(gridHelper)

        // // 进行渲染
        // renderer.render( scene, camera )

        // 让立方体动起来
        // function animate() {
        //    // 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
        //     requestAnimationFrame( animate );
        //     cube.rotation.x += 0.01;
        //     cube.rotation.y += 0.01;
        //     renderer.render( scene, camera );
        // }
        // animate();
    </script>
</body>
</html>